<template>
    <van-nav-bar title="商品详情" left-arrow>
        <template #right>
            <van-icon name="ellipsis" size="18" />
        </template>
    </van-nav-bar>

    <van-image width="100%" height="300" src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
    <div style="font-weight: 800; font-size: 20px;"><van-icon name="fire-o" color="#ee0a24" size="28px" /> Apple/苹果
        iPhone 16（A3288）128GB 粉色 支持移动联通电信5G 双卡双待手机</div>
    <div style="color: red;">￥<strong style="font-size: 26px;">3188.00</strong></div>
    <div style="color: darkgrey;">原价：<strong>4288.00</strong></div>

    <van-row style="text-align: center; color: #a6a7a9; margin-top: 10px; height: 40px; line-height: 40px;">
        <van-col span="8"><van-icon name="wechat-pay" size="20px" />分享</van-col>
        <van-col span="8"><van-icon name="star" size="20px" />收藏</van-col>
        <van-col span="8"><van-icon name="bill" size="20px" />降价通知</van-col>
    </van-row>
    <div>
        <van-row>
            <van-col span="4">尺寸：</van-col>

            <van-col span="20">S,L,XL,XXL</van-col>
        </van-row>
    </div>
    <hr>
    <img src="https://img14.360buyimg.com/cms/jfs/t1/281590/2/1437/52765/67d1499cF423a7791/96a6d57e0560c262.jpg" alt="" width="100%">

    <van-action-bar>
        <van-action-bar-icon icon="chat-o" text="客服" @click="onClickIcon" />
        <van-action-bar-icon icon="cart-o" text="预约记录" @click="onClickIcon" />
        <van-action-bar-icon icon="shop-o" text="店铺" @click="onClickIcon" />
        <van-action-bar-button type="danger" text="立即预约" @click="onClickButton" />
    </van-action-bar>

</template>

<script setup>
import { onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';
const route = useRoute();
// route 是用来获取路由跳转传递参数的
// router 只是用来跳转页面的
const id = ref(0)
const checked = ref('1');
onMounted(() => { 
    console.log(route.query.id);
    id.value = route.query.id;
    callproductApi()
})
import axios from 'axios';
const callproductApi = () => { 
    // axios.get("api/product", params={id:id} ).then(res => { 
    //     console.log(res);
    // })
    axios({
        url: "http://localhost:8080/api/product",
        params:{id:id.value}
    }).then(res => { 
        console.log(res);
    })
}


const onClickIcon = () => {
    console.log('点击图标');
    
} 
const onClickButton = () => {
    console.log('点击按钮');

}
</script>

<style scoped>

</style>